<script lang="ts" setup>
import { useStyleStore } from '@/stores/style'

const styleStore = useStyleStore()

const themes = [
  {
    light: 'rgb(255, 254, 249)',
    label: '雪白/钢蓝 (默认)',
    dark: 'rgb(15, 20, 35)',
    lightInfo:
      '雪白色：是一种非常纯净、明亮的颜色，它象征着纯洁、清新和简约。这种颜色的名字来源于新落下的纯净雪花的颜色，因此它常常与自然界的纯净和新鲜联系在一起。',
    darkInfo:
      '钢蓝色：是一种介于灰色和蓝色之间的色调，其名称来源于某些钢材表面呈现出的颜色。这种颜色传达出一种稳重、冷静且不失优雅的感觉。',
    imgUrl: 'http://localhost:9000/static/system/20250327/20250327144756162.webp'
  },
  {
    light: 'rgb(241, 147, 156)',
    label: '春梅/葡萄酒',
    dark: 'rgb(98, 16, 46)',
    lightInfo:
      '春梅红：是一种富有活力与温暖的颜色，这种颜色充满了生机与希望。春梅红通常带有一种粉色调，但比普通的粉色更加鲜艳和热烈，春梅红象征着新生、活力以及美好的开始，非常适合用于表达积极向上的情感或庆祝活动。',
    darkInfo:
      '葡萄酒红：是一种深邃且富有魅力的颜色，它得名于红葡萄酒的色泽，葡萄酒红色调浓郁，给人一种成熟、优雅且略带神秘的感觉。',
    imgUrl: 'http://localhost:9000/static/system/20250327/20250327144755149.webp'
  },
  {
    light: 'rgb(18, 170, 156)',
    label: '美蝶/深海',
    dark: 'rgb(26, 59, 50)',
    lightInfo:
      '美蝶绿：是一种能够带给人平静与和谐感的颜色，它既不太暗也不过于鲜艳，而是处于一种恰到好处的平衡状态。',
    darkInfo:
      '深海绿：是一种深邃而神秘的颜色，它让人联想到海洋深处的宁静与未知。这种颜色通常具有丰富的蓝绿色调，既包含了大海的广阔和深邃，也带有一丝神秘的气息。',
    imgUrl: 'http://localhost:9000/static/system/20250327/20250328114137069.webp'
  },
  {
    light: 'rgb(99, 187, 208)',
    label: '霁青/钢青',
    dark: 'rgb(20, 35, 52)',
    lightInfo:
      '霁青：这种颜色特别富有诗意和文化内涵。霁青的名字来源于雨后初晴时天空的颜色，带有一种深邃而宁静的特质。霁青色通常被描述为一种清澈、明亮且略带冷调的蓝绿色，让人联想到大自然中的湖泊、森林或是清晨的天空。',
    darkInfo:
      '钢青：是一种独特且充满现代感的颜色，它融合了钢铁的冷峻与青色的深邃。这种颜色通常给人一种稳重、专业且略带神秘的感觉，带有一定的灰色成分，使其看起来更加低调和内敛。',
    imgUrl: 'http://localhost:9000/static/system/20250327/20250327144755800.webp'
  },
  {
    light: 'rgb(102, 169, 201)',
    label: '涧石/暗蓝',
    dark: 'rgb(16, 31, 48)',
    lightInfo:
      '涧石蓝：是一种富有自然美感和宁静气息的颜色，其名称来源于山涧溪流边石头的颜色。这种蓝色带有一定的灰度或绿调，给人一种沉稳、冷静且贴近自然的感觉。',
    darkInfo:
      '暗蓝：是一种深邃而富有神秘感的颜色，它通常被认为是蓝色的一种较深的变体，有时可能接近于海军蓝或更深。这种颜色带有一种沉稳、专业且略显严肃的气息。',
    imgUrl: 'http://localhost:9000/static/system/20250327/20250327144754204.webp'
  },
  {
    light: 'rgb(97, 100, 159)',
    label: '山梗/龙胆',
    dark: 'rgb(34, 32, 46)',
    lightInfo:
      '山梗紫：通常是一种带有神秘感和深度的紫色，既包含了紫色的高贵与浪漫，也可能带有一些蓝色的冷静和深邃。',
    darkInfo:
      '龙胆紫：是一种深邃且充满神秘感的颜色，得名于龙胆花的颜色。龙胆花通常有非常鲜艳的蓝色或紫色花朵，在传统上，"龙胆紫"指的是这种植物所展现出来的浓郁而深沉的紫色调。',
    imgUrl: 'http://localhost:9000/static/system/20250327/20250328114134359.webp'
  }
]

const changTheme = (i: number) => {
  styleStore.background.bgLightColor = themes[i].light
  styleStore.background.bgDarkColor = themes[i].dark
}
</script>

<template>
  <el-container class="w-full p-5 gap-24 max-lg:gap-10" direction="vertical">
    <el-container
      v-for="(p, i) in themes"
      :key="p.light"
      :class="
        'use-radius use-second-bg use-shadow max-xl:flex-wrap use-transitions-shadow-short ' +
        (i % 2 == 0 ? '' : ' flex-row-reverse')
      "
    >
      <el-container class="h-full">
        <el-image :src="p.imgUrl" class="h-full" fit="cover" />
      </el-container>
      <el-container class="gap-2 p-5 w-fit" direction="vertical">
        <span class="text-2xl max-sm:text-lg text-amber-500">{{ p.label }}</span>
        <span>{{ p.lightInfo }}</span>
        <span>{{ p.darkInfo }}</span>
        <a
          class="pt-1 mt-auto pb-1.5 px-4 text-center duration-500 bg-amber-500 hover:text-gray-50 rounded-full"
          @click="changTheme(i)"
        >
          立即体验
        </a>
      </el-container>
    </el-container>
    <el-container
      class="min-h-[450px] use-second-bg max-xl:flex-col use-radius use-shadow use-transitions-shadow-short"
    >
      <el-container
        :style="{ backgroundColor: styleStore.background.bgLightColor }"
        class="aspect-video use-transitions-shadow-short relative use-shadow"
      >
        <span :style="{ color: styleStore.background.bgDarkColor }" class="flex absolute p-5 w-32">
          主色调
        </span>
        <el-container
          :style="{ backgroundColor: styleStore.background.bgDarkColor }"
          class="contrary-box relative size-full"
        >
          <el-container
            :style="{ backgroundColor: styleStore.background.bgSecondLight }"
            class="aspect-video absolute right-0 bottom-0 w-3/5 use-transitions-shadow-short use-shadow"
          >
            <span
              :style="{ color: styleStore.background.bgSecondDark }"
              class="flex p-5 w-32 absolute"
            >
              次色调
            </span>
            <el-container
              :style="{ backgroundColor: styleStore.background.bgSecondDark }"
              class="contrary-box relative size-full"
            >
              <el-container
                :style="{ backgroundColor: styleStore.background.bgThirdLight }"
                class="aspect-video absolute right-0 bottom-0 w-2/3 use-transitions-shadow-short use-shadow"
              >
                <span
                  :style="{ color: styleStore.background.bgThirdDark }"
                  class="flex p-5 w-32 absolute"
                >
                  三色调
                </span>
                <el-container
                  :style="{ backgroundColor: styleStore.background.bgThirdDark }"
                  class="contrary-box size-full"
                />
              </el-container>
            </el-container>
          </el-container>
        </el-container>
      </el-container>
      <el-container class="gap-2 max-w-96 p-5" direction="vertical">
        <span class="flex flex-wrap gap-5">
          <SvgIcon message="自定义" name="edit" parent-class="text-xl" svg-class="!size-5" />
          <a
            class="flex py-1 px-2 text-sm use-radius-xs use-transitions-shadow-short use-hover-bg border"
            type="success"
            @click="styleStore.resetBackground()"
          >
            恢复默认
          </a>
        </span>
        <span class="flex flex-wrap gap-3">
          <span class="flex items-center">
            <span class="demonstration">白天主色调：</span>
            <el-color-picker v-model="styleStore.background.bgLightColor" />
          </span>
          <span class="flex items-center">
            <span class="demonstration">夜晚主色调：</span>
            <el-color-picker v-model="styleStore.background.bgDarkColor" />
          </span>
        </span>
        <span class="flex flex-wrap gap-3">
          <span class="flex items-center">
            <span class="demonstration">白天次色调：</span>
            <el-color-picker v-model="styleStore.background.bgSecondLight" />
          </span>
          <span class="flex items-center">
            <span class="demonstration">夜晚次色调：</span>
            <el-color-picker v-model="styleStore.background.bgSecondDark" />
          </span>
        </span>
        <span class="flex flex-wrap gap-3">
          <span class="flex items-center">
            <span class="demonstration">白天三色调：</span>
            <el-color-picker v-model="styleStore.background.bgThirdLight" />
          </span>
          <span class="flex items-center">
            <span class="demonstration">夜晚三色调：</span>
            <el-color-picker v-model="styleStore.background.bgThirdDark" />
          </span>
        </span>
      </el-container>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped></style>
